<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="referrer" content="no-referrer"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>推荐文章</title>
    <link type="text/css" rel="stylesheet" href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}">
    <link type="text/css" rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
          th:href="@{https://unpkg.com/element-ui/lib/theme-chalk/index.css}">
    <link type="text/css" rel="stylesheet" href="../static/css/blogs.css" th:href="@{/css/blogs.css}">
    <link rel="stylesheet" href="../static/css/animate.css" th:href="@{/css/animate.css}">
    <style type="text/css">
        .panel {
            width: 22% !important;
            float: left;
            margin: 15px 15px;
        }

        .panel-heading {
            height: 80px !important;
        }

        .panel-heading .panel-title {
            height: 100% !important;
            vertical-align: middle;
            font-size: 20px;
            font-family: 隶书;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
        }

        .panel a {
            text-decoration: none;
        }

        .panel-body a{
            color: black;
            font-size: 16px;
            font-family: 宋体;
        }

        .panel-footer a{
            width: 100%;
        }
    </style>
    <script type="text/javascript" src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
</head>
<body>
<!-- 导航-->
<nav class="navbar navbar-default" role="navigation">
    <div class="container navigation-nav">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#example-navbar-collapse">
                <span class="sr-only"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a th:href="@{/index}" id="logo" class="navbar-brand dd">流沙</a>
        </div>
        <div class="collapse navbar-collapse" id="example-navbar-collapse">
            <ul class="nav navbar-nav navbar-left">
                <li><a th:href="@{/index}" class="m-l-20"><i class="el-icon-reading"></i>&nbsp;<span
                        class="hidden-md hidden-sm">博文</span></a></li>
                <li><a th:href="@{/type}" class="m-l-20"><i class="el-icon-user"></i>&nbsp;<span
                        class="hidden-md hidden-sm">分类</span></a></li>
                <li><a th:href="@{/news}" class="m-l-20"><i class="el-icon-bell"></i>&nbsp;<span
                        class="hidden-md hidden-sm">消息</span></a></li>
            </ul>
            <form class="nav navbar-nav navbar-form search" method="post" role="search" action="#"
                  th:action="@{/search}"
                  target="_blank">
                <div class="form-group input-group">
                    <input type="text" name="query" class="form-control" placeholder="搜索"
                           th:value="${query}">
                </div>

            </form>
            <ul class="nav navbar-nav navbar-right">
                <!--<li>-->
                <a th:href="@{/login}" type="button" class="btn btn-link btn-lg btn-login"
                   th:style="${session.user}!=null ? 'display:none':'display:inline-block'">登录</a>
                <!--</li>-->
                <!--<li>-->
                <a th:href="@{/registered}" type="button" class="btn btn-danger btn-lg btn-register"
                   th:style="${session.user}!=null ? 'display:none':'display:inline-block'">注册</a>
                <!--</li>-->

                <li class="dropdown" th:style="${session.user}==null ? 'display:none':'display:inline-block'" id="drop">
                    <a href="#" class="dropdown-toggle bg clear" data-toggle="dropdown">
                        <img th:src="@{/images/timg.jpg}" class="img-circle" alt=""
                             style="width: 40px;height: 40px;">
                        <!--<span class="nickname" th:text="${session.user.nickname}"></span>-->
                        <i class="glyphicon glyphicon-triangle-right"></i>
                    </a>
                    <ul class="dropdown-menu animate__animated animate__fadeInRight">
                        <li style="height: 40px!important;">
                            <a th:href="@{/homepage}"><i class="glyphicon glyphicon-user"></i>&nbsp;&nbsp;&nbsp;个人主页</a>
                        </li>
                        <li style="height: 40px!important;">
                            <a th:href="@{/logout}"><i class="glyphicon glyphicon-log-out"></i>&nbsp;&nbsp;&nbsp;退出</a>
                        </li>
                    </ul>
                </li>
                <!--<li>-->
                <a th:href="@{/post}" type="button" class="btn btn-info btn-lg btn-edit" th:style="${session.user}==null ? 'display:none':'display:inline-block'"><i
                        class="el-icon-edit"></i>写文章</a>
                <!--</li>-->
            </ul>
        </div>
    </div>
</nav>

<!--中间内容-->
<div class="container">
    <div class="row">
        <!--推荐内容-->
        <div class="panel panel-warning" th:each="blog:${recommendBlogs}">
            <div class="panel-heading">
                <p class="panel-title">
                    <a href="#" th:href="@{/blog/{blogId}(blogId=${blog.blogId})}"
                       target="_blank"
                       th:text="${blog.title}"></a>
                </p>
            </div>
            <div class="panel-body">
                <a href="#">
                    <span>更新于:</span>
                    <span th:text="${#dates.format(blog.updatetime,'yyyy-MM-dd')}"></span>
                </a><br><br>
                <!--浏览次数-->
                <a href="#">
                    <span>阅读次数:</span>
                    <span th:text="${blog.views}"></span>
                </a>
            </div>
            <div class="panel-footer">
                <a th:href="@{/blog/{blogId}(blogId=${blog.blogId})}"
                   target="_blank" type="button" class="btn btn-warning">阅读</a>
            </div>
        </div>
    </div>
    <!--&lt;!&ndash;分页&ndash;&gt;-->
    <!--<div class="row" th:fragment="pager">-->
    <!--<nav>-->
    <!--<ul class="pagination">-->
    <!--<li class="page-item" th:each="p : ${#numbers.sequence(1,pages.totalPages)}">-->
    <!--<a href="javascript:void(0)" th:page="${p-1}" class="page-link pagelink" th:text="${p}"></a>-->
    <!--</li>-->
    <!--</ul>-->
    <!--</nav>-->
    <!--<script type="text/javascript">-->
    <!--$(function () {-->
    <!--$('.pagelink').click(function () {-->
    <!--let f = $("#form1");-->
    <!--let p = $("<input type='hidden' name='page'>");-->
    <!--$(p).val($(this).attr("page"));-->
    <!--// let s=$("<input type='hidden' name='size' value='1'>");-->
    <!--// $(s).appendTo(f);-->
    <!--$(p).appendTo(f);-->
    <!--$(f).submit();-->
    <!--return false;-->
    <!--});-->
    <!--});-->
    <!--</script>-->
    <!--</div>-->
</div>

<!--<script type="text/javascript" src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>-->
<script type="text/javascript" src="../static/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
<script type="text/javascript" src="../static/js/blogs.js" th:src="@{/js/blogs.js}"></script>
<script type="text/javascript" src="https://unpkg.com/element-ui/lib/index.js"
        th:src="@{https://unpkg.com/element-ui/lib/index.js}"></script>
</body>
</html>
